require(['./config'],() => {
    require(['swiper','template','req','header','footer','jquery'],(Swiper,template,req) => {
        class Index{
            constructor(){
                this.initSwiper()
                this.getNews()
                this.getHotData()
               
            }
          //初始化轮播图
            initSwiper(){
                var swiper = new Swiper('.swiper-container', {
                    spaceBetween: 30,
                    centeredSlides: true,
                    autoplay: {
                      delay: 2500,
                      disableOnInteraction: false,
                    },
                    pagination: {
                      el: '.swiper-pagination',
                      clickable: true,
                    },
                    navigation: {
                      nextEl: '.swiper-button-next',
                      prevEl: '.swiper-button-prev',
                    },
                  });
            }

            //获取最新动态数据
            getNews(){
              req.getIndex1()
              .then( res => {
                // console.log(res)
                if(res.code === 1){
                  // 渲染页面
                  this.renderNews(res.result_body)
                }
              })
            }

            // 渲染最新动态
            renderNews(list){
              const html = template('indexNewsTemplate',{res:list})
              $('.whatsnew ul').html(html)
            }


            // 获取人气推荐数据
            getHotData(){
              req.getIndex2()
              .then(res => {
                console.log(res)
                if(res.code === 1){
                  this.renderHotSales(res.result_body)
                }
              })
            }
            // 渲染人气推荐数据
            renderHotSales(res){
              // console.log(localStorage)
              const html = template('HotSales',{list:res})
              $('.tempsales ul').html(html)

               //渲染后给小蛋糕图片绑定事件
               this.addEvent()
            }


            addEvent(){
          
               $('.tempsales ul li').mouseenter(
                  function(){
                    
                      $(this).css({transform: 'rotateY(180deg)',transition: 'transform 1s'})
                      
                      
                  }
               )
               $('.tempsales ul li').mouseleave(
                function(){
                  
                    $(this).css({transform: 'rotateY(360deg)',transition: 'transform 1s'})
                    
                    
                }
             )
              //  $('.opposite').mouseenter(function(){
              //   //  console.log(123)
              //     $(this).css({transform: 'rotateY(90deg)',transition: 'transform 1s'})
              // })
            }
        }

        return new Index()
    })
})